<template>
  <div class="family-chat-root">
    <router-link class="back-btn" to="/counselor">← 返回辅导员端导航</router-link>
    <div class="chat-card">
      <div class="sidebar">
        <div class="sidebar-title">联系人
          <button class="add-btn" @click="showAddContact = true">＋</button>
        </div>
        <div class="group-filter">
          <span v-for="g in groups" :key="g" :class="['group-tag', {active: groupFilter===g}]" @click="groupFilter=g">{{ g }}</span>
          <span class="group-tag" :class="{active: groupFilter==='全部'}" @click="groupFilter='全部'">全部</span>
        </div>
        <div class="contacts">
          <div v-for="(contact, idx) in filteredContacts" :key="contact.id" :class="['contact-item', {active: idx===activeContact}]" @click="activeContact=idx">
            <div class="contact-avatar">{{ contact.avatar }}</div>
            <div class="contact-info">
              <div class="contact-name">{{ contact.name }}</div>
              <div class="contact-relation">{{ contact.relation }}</div>
              <div class="contact-group">分组：{{ contact.group }}</div>
            </div>
            <button class="setting-btn" @click.stop="openSetting(contact)"><i class="fa fa-cog"></i></button>
          </div>
        </div>
      </div>
      <div class="chat-area">
        <div class="chat-header">与 {{ contacts[activeContact]?.name }} 对话</div>
        <div class="chat-messages" ref="msgBox">
          <div v-for="(msg, idx) in contacts[activeContact].messages" :key="idx" :class="['chat-bubble', msg.from === 'me' ? 'me' : 'ta']">
            <span class="bubble-name" v-if="msg.from==='ta'">{{ contacts[activeContact].name }}：</span>
            {{ msg.text }}
          </div>
        </div>
        <div class="chat-input-area">
          <input v-model="reply" @keyup.enter="sendReply" placeholder="回复家长..." />
          <button @click="sendReply">发送</button>
        </div>
      </div>
    </div>
    <!-- 添加联系人弹窗 -->
    <div v-if="showAddContact" class="modal-mask">
      <div class="modal-box">
        <h4>添加联系人</h4>
        <div class="form-group">
          <label>姓名</label>
          <input v-model="addForm.name" placeholder="请输入姓名" />
        </div>
        <div class="form-group">
          <label>分组</label>
          <select v-model="addForm.group">
            <option v-for="g in groups" :key="g" :value="g">{{ g }}</option>
          </select>
        </div>
        <div class="form-group">
          <label>关系</label>
          <input v-model="addForm.relation" placeholder="如父亲/母亲/监护人" />
        </div>
        <div style="text-align:right; margin-top:10px;">
          <button @click="showAddContact=false">取消</button>
          <button @click="addContact" style="margin-left:10px;">添加</button>
        </div>
      </div>
    </div>
    <!-- 联系人设置弹窗 -->
    <div v-if="showSetting" class="modal-mask">
      <div class="modal-box">
        <h4>联系人设置</h4>
        <p>这里可以设置联系人（仅界面展示，无实际功能）。</p>
        <div style="text-align:right; margin-top:10px;">
          <button @click="showSetting=false">关闭</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
let idSeed = 4;
export default {
  name: 'CounselorFamilyChat',
  data() {
    return {
      reply: '',
      groupFilter: '全部',
      groups: ['高一(1)班', '高一(2)班', '高二(1)班'],
      activeContact: 0,
      showAddContact: false,
      showSetting: false,
      settingContact: null,
      addForm: { name: '', group: '高一(1)班', relation: '' },
      contacts: [
        { id: 1, avatar: '王', name: '王小明家长', group: '高一(1)班', relation: '父亲', messages: [
          {from:'ta',text:'请问孩子最近学习怎么样？'},
          {from:'me',text:'孩子最近表现不错，继续保持！'}
        ] },
        { id: 2, avatar: '李', name: '李华家长', group: '高一(2)班', relation: '母亲', messages: [
          {from:'ta',text:'老师，孩子在校吃得好吗？'}
        ] },
        { id: 3, avatar: '张', name: '张伟家长', group: '高二(1)班', relation: '母亲', messages: [
          {from:'ta',text:'老师您好，有空请联系我。'}
        ] }
      ]
    }
  },
  computed: {
    filteredContacts() {
      let arr = this.contacts;
      if (this.groupFilter !== '全部') arr = arr.filter(c => c.group === this.groupFilter);
      return arr;
    }
  },
  mounted() {
    this.scrollToBottom();
  },
  updated() {
    this.scrollToBottom();
  },
  methods: {
    sendReply() {
      if (this.reply.trim()) {
        this.contacts[this.activeContact].messages.push({from:'me',text:this.reply});
        this.reply = '';
      }
    },
    scrollToBottom() {
      this.$refs.msgBox && (this.$refs.msgBox.scrollTop = this.$refs.msgBox.scrollHeight);
    },
    addContact() {
      if (!this.addForm.name.trim()) return alert('请输入姓名');
      this.contacts.push({
        id: idSeed++,
        avatar: this.addForm.name[0],
        name: this.addForm.name,
        group: this.addForm.group,
        relation: this.addForm.relation,
        messages: []
      });
      this.showAddContact = false;
      this.addForm = { name: '', group: this.groups[0], relation: '' };
    },
    openSetting(contact) {
      this.settingContact = contact;
      this.showSetting = true;
    }
  }
}
</script>
<style scoped>
.family-chat-root { min-height: 100vh; background: #f6f8fa; padding: 32px 0 60px 0; }
.chat-card { display: flex; max-width: 900px; margin: 40px auto; background: #fff; border-radius: 14px; box-shadow: 0 4px 24px rgba(102,126,234,0.10); overflow: hidden; }
.sidebar { width: 240px; background: #f5f7fa; border-right: 1px solid #eee; display: flex; flex-direction: column; }
.sidebar-title { font-weight: bold; padding: 16px; border-bottom: 1px solid #eee; background: #f9f9f9; display: flex; align-items: center; justify-content: space-between; }
.add-btn { background: #007bff; color: #fff; border: none; border-radius: 50%; width: 28px; height: 28px; font-size: 20px; cursor: pointer; }
.add-btn:hover { background: #0056b3; }
.group-filter { padding: 10px 16px; border-bottom: 1px solid #eee; }
.group-tag { display: inline-block; background: #e6f4ff; color: #007bff; border-radius: 12px; padding: 2px 12px; margin-right: 8px; font-size: 13px; cursor: pointer; margin-bottom: 4px; }
.group-tag.active { background: #007bff; color: #fff; }
.contacts { flex: 1; overflow-y: auto; }
.contact-item { display: flex; align-items: center; padding: 16px; cursor: pointer; border-bottom: 1px solid #f0f0f0; transition: background 0.2s; position: relative; }
.contact-item.active, .contact-item:hover { background: #e6f4ff; }
.contact-avatar { width: 40px; height: 40px; border-radius: 50%; background: #007bff; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; margin-right: 12px; }
.contact-info { flex: 1; min-width: 0; }
.contact-name { font-size: 16px; font-weight: 500; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contact-relation { font-size: 13px; color: #888; }
.contact-group { font-size: 12px; color: #999; margin-top: 2px; }
.setting-btn { background: none; border: none; color: #888; font-size: 16px; cursor: pointer; margin-left: 6px; }
.setting-btn:hover { color: #007bff; }
.chat-area { flex: 1; display: flex; flex-direction: column; }
.chat-header { padding: 16px; border-bottom: 1px solid #eee; font-weight: bold; background: #f9f9f9; }
.chat-messages { flex: 1; overflow-y: auto; padding: 24px; background: #f8f9fa; display: flex; flex-direction: column; }
.chat-bubble { display: inline-block; margin: 8px 0; padding: 10px 18px; border-radius: 18px; max-width: 70%; word-break: break-all; }
.chat-bubble.me { background: #e6f4ff; align-self: flex-end; margin-left: auto; }
.chat-bubble.ta { background: #f1f1f1; align-self: flex-start; margin-right: auto; }
.bubble-name { color: #888; font-size: 13px; margin-right: 4px; }
.chat-input-area { display: flex; padding: 16px; border-top: 1px solid #eee; background: #fff; }
.chat-input-area input { flex: 1; padding: 10px 16px; border: 1px solid #ddd; border-radius: 20px; margin-right: 10px; }
.chat-input-area button { background: #007bff; color: #fff; border: none; border-radius: 20px; padding: 10px 24px; cursor: pointer; }
.chat-input-area button:hover { background: #0056b3; }
.modal-mask { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.2); z-index: 1000; display: flex; align-items: center; justify-content: center; }
.modal-box { background: #fff; border-radius: 10px; padding: 30px 24px; min-width: 320px; box-shadow: 0 8px 32px rgba(0,0,0,0.15); }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; margin-bottom: 6px; color: #333; }
.form-group input, .form-group select { width: 100%; padding: 8px 12px; border: 1px solid #ddd; border-radius: 6px; }
</style> 